import React, {useEffect, useState} from 'react';
import {Carousel} from 'antd';
import { useTranslation } from 'react-i18next';

import styles from './styles.module.less';
import {useNavigate} from "react-router";
import {getMarkList} from '@src/services/market';

const Recommend = () => {
    const { t } = useTranslation();
    const navigate = useNavigate();
    const [getListLoading, setGetListLoading] = useState(false);
    const [marketData, setMarketData] = useState({
        tenders: [],
        total: 0
    });

    useEffect(() => {
        onLoad();
    }, [])

    const onLoad = async () => {
        setGetListLoading(true);
        const res = await getMarkList({
            page: 0,
            size: 5
        });

        if (!res) return;

        setGetListLoading(false);
        setMarketData(res);
    }


    return (
        <div className={styles.introduce_box}>
            <div className={styles.carousel_box}>
                <Carousel autoplay style={{height: '100%'}}>
                    <a target="_blank" href="https://www.dcconnectglobal.com/starwan/">
                        <img src="/img/StarWan.png" alt=""/>
                    </a>
                    <a target="_blank" href="https://www.dcconnectglobal.com/sd-wan/">
                        <img src="/img/SE1000.jpg" alt=""/>
                    </a>
                    <a href="/price">
                        <img src="/img/DataCenter.jpg" alt=""/>
                    </a>
                </Carousel>
            </div>
            <div className={styles.article_box}>
                <div className={styles.name_box}>
                    <div className={styles.name}>{t('The latest bidding projects on the market')}</div>
                    <img src="https://nlp-eb.cdn.bcebos.com/static/eb/asset/vipIcon.9332ada7.png"
                         alt=""/>
                </div>
                <div className={styles.content}>
                    <div className={styles.desc}>{t('Through platform layer by layer review, we finally recommend the following bidding projects for you:')}</div>
                    <div className={styles.file_box}>
                        {marketData.tenders.map((item,index) => (
                          <p key={index}><a className={styles.desc}  onClick={() =>navigate(`/market/${item.tender_id}`)}>{index +1}. {item.title} </a></p>
                        ))}
                    </div>
                </div>
            </div>

            <a className={styles.case_top_box} href="/price">
                <div className={styles.name_box}>
                    <div className={styles.name}>{t('Do you want to know the DCI price?')}</div>
                    {/*<img src="https://nlp-eb.cdn.bcebos.com/static/eb/asset/vipIcon.9332ada7.png" alt="" />*/}
                </div>
                <div className={styles.content}>
                    <div className={styles.desc}>{t('Click to quickly view prices for free, making links simpler!')}</div>
                </div>
            </a>
            <a className={styles.case_bottom_box} href="/market">
                <div className={styles.name_box}>
                    <div className={styles.name}>{t('Check the latest market bids.')}</div>
                    {/*<img src="https://nlp-eb.cdn.bcebos.com/static/eb/asset/vipIcon.9332ada7.png" alt="" />*/}
                </div>
                <div className={styles.content}>
                    <div
                        className={styles.example_name}>{t('Search for benchmark news across the entire network to obtain massive business opportunities')}
                    </div>
                    {/*<div className={styles.example_img}>*/}
                    {/*    <img src="/img/logo.svg" alt=""/>*/}
                    {/*</div>*/}
                </div>
            </a>
        </div>
    )
};

export default Recommend;